{extend name="default:layout:base"}
{block name="meta_title"}快速注册并认证微信小程序{/block}
{block name="body"}
<div class="wrap">
    <van-steps :active="step">
        <van-step>填写小程序名称</van-step>
        <van-step>授权确认</van-step>
        <van-step>认证</van-step>
        <van-step>完成</van-step>
    </van-steps>

    <div class="content content-{$step}">
        {switch name="step"}
        {case value="0"}
        <div class="tip">
            <van-icon name="warning-o"></van-icon> 小程序昵称要求：
            <ul>
                <li>支持4-30个字符；</li>
                <li>不能试用小程序、微信、腾讯等其他及知名品牌关键字；</li>
            </ul>
        </div>
        <van-form @submit="onReg">
            <van-field
                    v-model="name"
                    label="小程序名称"
                    name="name"
                    placeholder="4-30个字符"
                    :rules="[{ required: true, message: '请填写小程序名称' }]"
            ></van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
        {/case}
        {case value="3"}
        <van-icon name="passed"></van-icon>
        <p>恭喜您，完成注册！</p>
        {/case}
        {default/}
        填写昵称
        {/switch}
    </div>
</div>
{/block}

{block name="js"}
<script>
    new Vue({
        el: '#app',
        data: {
            step: 0,
            name: '',
            submitIng: false
        },
        methods: {
            onReg(values) {
                if(this.submitIng)
                    return false;
                this.submitIng = true;
                Utils.request({
                    url: "{:url('regPost')}",
                    data: values
                }).then(res => {
                    if(res.code === 1) {
                        Utils.toast({
                            driver: vant.Toast,
                            msg: res.msg,
                            callback: () => {
                                console.log(res);
                                location.href = res.url; //跳转授权
                            }
                        });
                    }else{
                        Utils.toast({
                            driver: vant.Toast,
                            msg: res.msg,
                            type: 'fail'
                        });
                    }
                    this.submitIng = false;
                });
            },
        }
    });
</script>
{/block}
{block name="css"}
<style>
    .wrap{padding: 5px;}
    .btn-next{margin-top: 30px;}
    .content{margin-top: 30px;text-align: center;}
    .content-3 .van-icon{
        font-size: 8em;
        color: #07c160;
    }

    .tip{
        color:#1989fa;background:#ecf9ff;
        padding: 10px;
        text-align: left;
        margin-bottom: 30px;
    }
</style>
{/block}